/*********************
指标变更
* */
<template>
  <basic-container>
    <div v-if="showChangPage">
      <el-row style="margin:25px 0 0 0 ;">
        <div :height="searchheight">
          <span style="float:right;margin-top: -30px;cursor: pointer;" @click="searchchangeadvanced">
            {{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i
              :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            />
          </span>
          <div v-show="searchadvanced">
            <el-form :inline="true" :model="searchForm" class="form-inline">
              <el-form-item label="姓名" v-if="!choosePerOrDept">
                <el-input v-model="searchForm.assessRealName" placeholder="姓名" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="部门" v-else>
                <el-input v-model="searchForm.assessRealName" placeholder="部门" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="考核名称">
                <el-input v-model="searchForm.name" placeholder="考核名称" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="考核周期">
                <selectSearch @getDataByPerid="getDataByPerid"></selectSearch>
              </el-form-item>
              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  class="marginLeft"
                  @click="getDataList(1)"
                >检索</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-row>
      <el-row>
        <div style="margin-bottom: 10px;display: flex;justify-content: flex-end;padding-right: 10px"> <el-link type="primary" @click="viewlog">操作日志</el-link></div>
        <div style="padding:20px 0 0 0; border-top: 1px solid #b0bde2" >
          <span>指标考核&nbsp;&nbsp;</span>
          <el-radio-group v-model="choosePerOrDept" @change="choosePerOrDeptChange">
            <el-radio :label="0">人员</el-radio>
            <el-radio :label="1">机构</el-radio>
          </el-radio-group>
        </div>
      </el-row>
      <el-row>
        <el-table
          style="width: 100%;margin-top:20px"
          :data="dataList"
          border
          stripe
          header-align="center"
          v-loading="dataListLoading"
        >
          <el-table-column type="index" :index="indexMethod" header-align="center" align="center"  label="序号" width="55"></el-table-column>
          <el-table-column prop="assessUserName" align="center" label="员工编号" show-overflow-tooltip v-if="!choosePerOrDept"></el-table-column>
          <el-table-column prop="assessRealName" align="center" label="姓名" show-overflow-tooltip  v-if="!choosePerOrDept"></el-table-column>
          <el-table-column prop="assessDeptName" align="center" label="部门" show-overflow-tooltip  v-if="!choosePerOrDept"></el-table-column>
          <el-table-column prop="assessDeptName" align="center" label="部门" show-overflow-tooltip  v-else></el-table-column>
          <el-table-column prop="itemNum" align="center" label="指标数量" show-overflow-tooltip></el-table-column>
          <el-table-column prop="name" align="center" label="考核名称" show-overflow-tooltip></el-table-column>
       <!--   <el-table-column prop="weight" align="center" label="权重" show-overflow-tooltip>
            <template slot-scope="scope">
              <span :class="scope.row.weight==100?'weightColor':'weightRed'">{{scope.row.weight}}</span>
            </template>
          </el-table-column>-->
          <el-table-column prop="period" align="center" label="考核周期" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" align="center" width="100px">
            <template slot-scope="scope">
                <el-button type="primary" plain  @click="editRow(scope.row)" >变更</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageData.pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageData.pageSize"
            :total="pageData.totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </el-row>
    </div>

    <!--操作日志组件-->
    <logRecords ref='logRecordsRef' @close="close" v-else></logRecords>

    <personExamine v-if="personVisible" ref="personNode" @closeDialog="closeDialog" @refesData="getDataList"/>
    <departmentExamine v-if="deptVisible" ref="deptNode" @closeDialog="closeDialog1" @refesData="getDataList"/>
  </basic-container>
</template>

<script>
import personExamine from "./personExamine"; //人员考核组件
import departmentExamine from "./departmentExamine"; //机构考核组件
import logRecords from "@/views/dailyExamine/components/logRecords"; //日志组件
import {examineList, defaultList} from "@/api/dailyExamine/targetExamine/perORtarChange"; //接口api
import selectSearch from "@/views/dailyExamine/components/select-search.vue"; //流程组件

export default {
  data() {
    return {
      jsonData: [],
      ids: [],
      choosePerOrDept: 0, //选择的是人员还是机构
      deptVisible: false, //机构考核组件显隐
      personVisible: false, //人员考核组件显隐
      searchheight: "0", //搜索组件的高度
      searchadvanced: true, //搜索的显隐
      searchForm: {}, //搜索对象
      dataListLoading: false, //表格是否加载
      dataList: [], //表格数组
     // multipleSelection: [], //勾选数据
      pageData: {
        //分页对象
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0
      },
      headData: {} ,//总部启动的考核数据对象
      showChangPage:true
    };
  },
  components: {
    personExamine, //人员考核组件
    departmentExamine, //机构考核组件
    logRecords, //日志组件
    selectSearch
  },
  created() {
    this.getDataList();
    this.getHeadList();
  },
  methods: {
    editRow(row) {
        if(this.choosePerOrDept==0){
            this.personVisible = true;
            this.$nextTick(() => {
                this.$refs.personNode.init(this.headData, row);
            });
        }else{
            this.deptVisible = true;
            this.$nextTick(() => {
                this.$refs.deptNode.init(this.headData, row);
            });
        }
    },
    //  人员or机构选择改变
    choosePerOrDeptChange(val) {
      this.searchForm = {};
      this.getDataList();
    },
    // 查询总部启动的考核
    getHeadList() {
      defaultList()
        .then(r => {
          if (r.data.code == 0) {
            this.headData = r.data;
          } else {
            this.headData = {};
          }
        })
        .catch(err => {});
    },
    // 查询条件的展开关闭
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    // 查询列表
    getDataList() {
      this.dataListLoading = true ;
      examineList(
        Object.assign(
          {
            current: this.pageData.pageIndex,
            size: this.pageData.pageSize,
            type: this.choosePerOrDept
          },
          this.searchForm
        ),
       13
      )
        .then(r => {
          if (r.data.code == 0) {
            this.dataListLoading = false ;
            this.dataList = r.data.data.records.map(it => {
              it.rowshows = true;
              return it;
            });
            this.pageData.totalPage = r.data.data.total;
          }
        })
        .catch(err => {});
    },
    // 条数变化
    sizeChangeHandle(val) {
      this.pageData.pageSize = val;
      this.pageData.pageIndex = 1 ;
      this.getDataList();
    },
    // 页码分页变化
    currentChangeHandle(val) {
      this.pageData.pageIndex = val;
      this.getDataList();
    },
    //table表索引
    indexMethod(index) {
        return (this.pageData.pageIndex-1)*this.pageData.pageSize+index+1;
    },
    // 关闭人员考核新增弹窗
    closeDialog() {
      this.personVisible = false;
    },
    // 关闭机构考核新增弹窗
    closeDialog1() {
      this.deptVisible = false;
    },
    //查看日志
    viewlog(){
        this.showChangPage = !this.showChangPage ;
        this.$nextTick(()=>{
            this.$refs.logRecordsRef.init() ;
        })
    },
    close(){
        this.showChangPage = !this.showChangPage ;
    },
      //选择周期执行搜索功能
      getDataByPerid(period){
          this.searchForm.period = period ;
          this.getDataList() ;
      }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-select .el-select__tags {
  overflow: auto !important;
}
::v-deep.el-tag.el-tag--info {
  margin: 5px;
  border: 1px solid green;
}
::v-deep.el-divider {
  background-color: #b0bde2 !important;
}
.weightRed {
  color: rgba(255, 0, 0, 0.726);
}
/deep/.el-divider__text, .el-link{font-size: 16px!important;}
</style>
